{% extends 'base/base_site.html' %}
{% block css %}
{{ block.super}}
{#<link rel="stylesheet" type="text/css" href="/static/css/plugins/chosen/chosen.css">#}
{#<link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">#}

{% endblock%}
{% block content %}
<div class="ibox-title">
  <h5>组管理</h5>
</div>
<div class="ibox-content">
  <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline">
    <div class="row">
      <div class="col-sm-8">
        <div class="dataTables_length" id="DataTables_Table_0_length" style="margin-bottom:15px;">
          <a  class="btn btn-sm btn-success btn-add" data-toggle="modal" data-target="#editor"><i class="fa fa-plus"></i> 添加组</a>
        </div>
      </div>
    </div>
    <table class="table table-striped table-bordered table-hover dataTables-example dataTable dtr-inline" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
      <thead>
        <tr role="row">
          <th  tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >用户组</th>
          <th  tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >用户成员</th>
          <th  tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >操作</th>
        </tr>
      </thead>
      <tbody id="content">

      {% include 'accounts/user/group_table.html'%}
      </tbody>
    </table>
{% include 'common/paginator.html'%}
</div>
{% include 'accounts/user/group_modal.html'%}

{% endblock %}
{% block javascripts %}
{{ block.super}}

{#<script src="/static/js/plugins/chosen/chosen.jquery.js" type="text/javascript"></script>#}
{#<script src="/static/js/plugins/iCheck/icheck.min.js"></script>#}

<!--chosen control and array contains function-->
<script type="text/javascript">
function resetChosen() {
    var config = {
        '.chosen-select': {
            width: "100%"
        },
        '.chosen-select-deselect': {
            allow_single_deselect: true
        },
        '.chosen-select-no-single': {
            disable_search_threshold: 10
        },
        '.chosen-select-no-results': {
            no_results_text: 'Oops, nothing found!'
        },
        '.chosen-select-width': {
            width: "100%"
        },

    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
    $('#users').trigger("chosen:updated");
}

function reset() {
        $('#group_name').val("");
        $('#users').val("")
    }

Array.prototype.contains = function(needle) {
    for (i in this) {
        if (this[i] == needle) return true;
    }
    return false;
}
</script>


<script type="text/javascript">

var users = {{users |safe}};

$('.btn-edit').on('click',function(event){
    var btn = $(event.target);
    var row = btn.data('row').split('|');
    $('#group_name').val(row[1]);
    row_user = row[2].split(',');
    if (users !=""){
      $.each(users,function(key,value){
          var  obj = document.getElementById("users");
          var  op = new Option(value[2],value[0])
          if(row_user.contains(value[2])){
              op.selected = true;
          }
          obj.add(op);
      });
    }else if (users == "") {
            
            $.each(users,function(key,value){
                    var  obj = document.getElementById("users");
                    var  op = new Option(value[2],value[0])
                    obj.add(op);
            });
  }
resetChosen();
})  

$('.btn-add').on('click',function(){

  var users = {{users |safe}};
  reset();
  $('#users').empty();
  $.each(users,function(key,value){
          var  obj = document.getElementById("users");
          var  op = new Option(value[2],value[0])
          obj.add(op);
  });
resetChosen();
});

$('.btn-commit').on('click',function(){
    var group_name =  document.getElementById("group_name").value;
    var users =  $('#users').val();
    $.ajax({
        type: "POST",
        url: "{% url 'accounts_group_update' %}",
        data: {"group_name":group_name,"users":JSON.stringify(users)},
        success: function(data,textStatus){
              window.location.reload()
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert(XMLHttpRequest.status);
              alert(XMLHttpRequest.readyState);
              alert(textStatus);
        },
    });
});
</script>

<script type="text/javascript">
  $(document).ready(function(){
      $('.i-checks').iCheck({
          checkboxClass: 'icheckbox_square-green',
          radioClass: 'iradio_square-green',
      });
});
</script>
{% endblock %}